<template>
  <div ref="container" class="topology-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import G6 from '@antv/g6'

const props = defineProps({
  nodes: Array,
  edges: Array
})

const container = ref(null)
let graph

onMounted(() => {
  graph = new G6.Graph({
    container: container.value,
    width: 800,
    height: 600,
    modes: { default: ['drag-canvas'] },
    layout: { type: 'force' }
  })

  graph.data({
    nodes: props.nodes,
    edges: props.edges
  })
  
  graph.render()
})
</script>

<style scoped>
.topology-container {
  background: #f5f7fa;
  border-radius: 8px;
}
</style> 